<template>
  <div class="violationComplaint">
    <div class="tabs">
      <div
        class="tab"
        v-for="(item, index) in tabsItem"
        @click="getTabList(item, index)"
        :class="{ active: active === index }"
      >
        {{ item }}
      </div>
    </div>

    <div class="lists">
      <div
        class="list"
        v-for="(item, index) in list"
        :class="{ first: index === 0 }"
        :key="index"
        @click="toDetail(item)"
      >
        <img src="../../assets/image/list_default_img.png" alt="" />
        <div class="content">
          <div class="title">{{ item.context || defaultInfo }}</div>
          <div class="bottom">
            <div class="address">{{ item.place }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
        <div class="cl_tag" :class="{ 'wcl': active === 0, 'ycl': active === 1 }">
          {{ item.cl }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 房屋码
import { ref, onMounted } from "vue"
// import decorationApi from "../../api/decoration";
import complaintApi from "../../api/complaint"
import { useUserStore } from "@/stores/user.js"
import { useRoute, useRouter } from "vue-router"
const active = ref(0)
const tabsItem = ["未处理", "已处理"]
const list = ref([])
const store = useUserStore()
const defaultInfo = ref('暂无信息')
const route = useRoute()
const router = useRouter()

const getComplaintWcl = async () => {
  let params = {
    handle: "未处理",
  };
  let res = await complaintApi.complaintList(params);
  console.log("--complaintList--", res);
  list.value = res.data.rows.map((item) => {
    item["cl"] = "未处理";
    return item;
  })
}
const getComplaintYcl = async () => {
  let params = {
    handle: "已处理",
  }
  let res = await complaintApi.complaintList(params);
  console.log("--complaintSH--", res);
  list.value = res.data.rows.map((item) => {
    item["cl"] = "未处理";
    return item;
  })
}
const getTabList = (item, index) => {
  // console.log('item', item)
  active.value = index;
  item == "未处理" ? getComplaintWcl() : getComplaintYcl();
}
const toDetail = (item) => {
  router.push({
    path: "/violationComplaint/detail",
    query: {
      tid: item.tid
    }
  })
}

onMounted(() => {
  getComplaintWcl();
})
</script>

<style lang="scss" scoped>
.violationComplaint {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tabs {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 50px;
    border-bottom: 0.5px solid #d8d8d8;
    .tab {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 50px;
      color: #888888;
    }
    .active {
      color: #409efe;
      background: #ffffff;
      border-bottom: 0.5px solid #d8d8d8;
      border-top: 2px solid #409efe;
    }
  }
  .lists {
    margin-top: 15px;
    width: 93%;
    height: 400px;
    position: relative;
    .list {
      box-sizing: border-box;
      display: flex;
      width: 100%;
      height: 80px;
      background: #ffffff;
      border-radius: 10px;
      padding: 17px 8px 17px 10px;
      img {
        width: 46px;
        height: fit-content;
      }
    }
    .first {
      .content {
        .bottom {
          width: 91%;
        }
      }
    }
    .list:not(.first) {
      margin-top: 10px;
    }
    .content {
      width: 100%;
      margin-left: 10px;
      overflow: hidden;
      .title {
        width: 76%;
        font-family: 思源黑体;
        font-size: 17px;
        font-weight: 600;
        color: #222222;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .bottom {
        margin-top: 3px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666666;
        .address {
          font-family: Microsoft YaHei;
          font-size: 12px;
          color: #666666;
          margin-top: 6px;
        }
        .time {
          font-family: Microsoft YaHei;
          font-size: 12px;
          color: #666666;
        }
      }
    }
    .cl_tag {
      position: absolute;
      right: 9px;
      width: 46px;
      height: 22px;
      border-radius: 3px;
      color: #fff;
      font-family: Microsoft YaHei;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: red;
    }
    .wcl {
      background: linear-gradient(90deg, #f2724d 0%, #ff9576 99%);
    }
    .ycl {
      background: linear-gradient(90deg, #4fc5a6 5%, #41b99a 99%);
    }
  }
}
</style>
